:root{
  --transition-fast: 320ms;
  --transition-slow: 520ms;
  --radius: 12px;
  --card-pad: 12px;
}

/* estilo de foco visível para quem navega por teclado */
.color-wrap:focus{
  box-shadow: 0 0 0 4px rgba(34,139,230,0.18);
  transform: translateZ(0);
}

/* Classe principal para aplicar o efeito na imagem */
img.color-on-hover{
  display:block;       /* responsiva */
  height:auto;  /* limite opcional, ajuste conforme necessário */
  filter: grayscale(100%) contrast(95%); /* deixa levemente mais contrastada em PB */
  transition: filter var(--transition-slow) ease, transform var(--transition-fast) ease;
  will-change: filter, transform;
  transform-origin: center center;
  backface-visibility: hidden;
}

/* Ao passar o mouse ou focar o wrapper, remove o grayscale */
.color-wrap:hover img.color-on-hover,
.color-wrap:focus img.color-on-hover,
img.color-on-hover:hover /* alternativa caso queira hover direto na img */{
  filter: none;
  transform: scale(1.02); /* leve zoom para destaque */
}

/* Responsividade pequena */
@media (max-width:480px){
  body{ padding:18px; }
  .page{ gap:18px; }
  img.color-on-hover{ max-width:10%; }
}